<template>
  <el-select 
    v-model="selectedDept" 
    :placeholder="placeholder"
    clearable
    filterable
    @change="handleChange"
    :disabled="disabled"
  >
    <el-option
      v-for="item in deptOptions"
      :key="item.deptId"
      :label="item.deptName"
      :value="item.deptId"
    />
  </el-select>
</template>

<script>
import { listDept } from "@/api/system/dept";

export default {
  name: "DeptSelect",
  props: {
    value: {
      type: [String, Number],
      default: undefined
    },
    placeholder: {
      type: String,
      default: "请选择部门"
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      deptOptions: [],
      selectedDept: undefined
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.selectedDept = val;
      }
    }
  },
  created() {
    this.getDeptList();
  },
  methods: {
    getDeptList() {
      listDept({ parentId: 100 }).then(response => {
        this.deptOptions = response.data;
      });
    },
    handleChange(value) {
      this.$emit('input', value);
      this.$emit('change', value);
    }
  }
};
</script>
